<template>
    <div>
        <el-form 
        status-icon 
        ref="ruleForm" 
        label-width="100px" 
        class="demo-ruleForm"
        style="margin-top:50%;margin-right: 15%;">
            <Avatar/>
            <el-form-item label="Chats网名">
              <el-input v-model="uname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="upwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="uage"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Avatar from '../components/Avatar.vue'
import pubsub from 'pubsub-js'
export default {
  name:'Enroll',
  components:{Avatar},
  data() {
    return {
      uname:'',
      pwd:'',
      upwd:'',
      uage:'',
    }
  },
  methods:{
    submitForm(){
      pubsub.publish('upload_img', true)
      if (this.pwd != this.upwd) {
        this.$message.error('两次输入的密码必须保持一直数据不能为空');
      }else{
        const options = {
          method: 'POST',
          headers: {
            "Content-Type": 'application/json'
          }
        }
        fetch(`http://8.130.95.37:8085/setUser/${this.uname}/${this.upwd}/${this.uage}`, options).then(res => res.json()).then(res => {
          // pubsub.publish('upload_img', true)
          this.$store.state.udate=res
          alert(res[0].uaccount+'请牢记您的账号')
          localStorage.setItem("name", res[0].uid);
          this.$router.push('/home/list')
        }).catch(err => {
          console.log(err)
        })
      }
    },
    resetForm(){
      this.uname=''
      this.pwd=''
      this.upwd=''
      this.uage=''
    }
  }

}
</script>


<style scoped>

</style>
